import { styled } from "styledfc";
import img from "./img.ts";
import KindList from "./components/KindList.tsx";
import HotList from "./components/HotList.tsx";
import Header from "../../components/Header.tsx";
import Main from "../../components/Main.tsx";
import { FormEvent, useState } from "react";
import { useNavigate } from "react-router-dom";
import { Toast } from "react-vant";
export default function index() {
    const navigate = useNavigate();
    const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        e.stopPropagation();
        if (keyword !== "") {
            navigate("/list/search/" + keyword);
        } else {
            Toast.info("请输入搜索内容！");
        }
    };
    const [keyword, setKeyword] = useState("");
    return (
        <div className={indexStyle.className}>
            <Header h2="Adopt a" h1="Friend" img={img.indexHeader} height="130rem" />
            <form className="index__search" onSubmit={(e) => handleSubmit(e)}>
                <img className="index__search-icon" src={img.search} />
                <input onChange={(e) => setKeyword(e.target.value)} className="index__search-placeholder" value={keyword} placeholder="请输入需要搜索的内容..." />
            </form>
            <Main>
                <KindList />
                <HotList />
            </Main>
        </div>
    );
}
const indexStyle = styled({
    fontSize: "16rem",
    backgroundColor: "#a1b275",
    ".index__search": {
        margin: "0 15rem 20rem",
        height: "50rem",
        backgroundColor: "white",
        borderRadius: "16rem",
        display: "flex",
        alignItems: "center",
        ".index__search-icon": {
            width: "20rem",
            height: "20rem",
            margin: "10rem",
        },
        ".index__search-placeholder": {
            fontSize: "14rem",
            color: "#BBC3CE",
            fontWeight: "500",
            flex: "1",
            border: "none",
            "&::-webkit-input-placeholder": {
                color: " #ccc",
            },
            "&:::-moz-placeholder": {
                color: " #ccc",
            },
            "&::::-moz-placeholder": {
                color: " #ccc",
            },
            "&:::-ms-input-placeholder": {
                color: " #ccc",
            },
        },
    },
});
